<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box2{
        width: 200px;
        height: 200px;
        background-color: blue;
    }

    #icon_box{
         width: 200px;
         height: 200px;
         background-color: burlywood;
         border: 1px solid red;
     
    }
    
</style>
<script src="./jquery.js"></script>
<body>
    <div id="box1"></div>
    <div class="box2"></div>
    <p>Hello</p><p>2nd Paragraph</p>


    <div id="icon_box">
        <img id="xiaomi_icon" src="./favicon.ico" alt="">
    </div>

   <div id="appended_div"></div>
   <div id="appended_div" ></div>
   <span id=append_span>唐玮真的帅</span>



   <div id="wrap_div"></div>
<span id="wrap_span"></span>



<button id="btn">按钮</button>
    <script>
   $("#box1").css({"width":200,"height":200,"background-color":"red"});

   //点击加上css样式
   $(".box2").click(function(){
        // console.log(this);//使用this，不用使用箭头函数
        $(this).css({
            width:"+=20"
            ,
            height:(index,value)=>{
               
                  return parseInt(value)+10;
                  
            },
          background:(index,value)=>{
                return value="red";
          }
        })
   })



   //offset 相对于视口的偏移程度 返回left 和 top
   var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

//设置相对于视口的偏移程度
// $("P:last").offset({left:0,top:10})


//设置相对于父级的偏移程度


console.log($("#xiaomi_icon"));
console.log(  $("#xiaomi_icon").position().left);//1.109619134354034e-7
console.log($("#xiaomi_icon").position().top);//0.0000058330078331891855

//相对于滚动条的偏移量
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );

//设置相对于滚动条的偏移量
$("p:first").scrollTop=300;


//获取元素的高度
console.log($("#box1").height());//200
//设置高度
// $("#box1").height(100)


//向标签里面添加html标签(和使用html标签类似)
$("p:first").append('<a href="">www.baidu.com</a>');

//追加操作,将p标签追加到每一个div中
$("#append_span").appendTo("#appended_div");





//创建一个元素，把原来的元素包括起来
$("#wrap_span").wrap("#wrap_div");

//unwrap,撤销原来的包含关系
$("#wrap_span").unwrap();


//wrapAll将匹配的所有的div用div包括起来
// $("div").wrapAll("<div></div>")


//wrapinner，将元素的(子元素)用其他元素包括起来

//replacewith

//删除所有子节点 empty

//删除结点 remove
   
$("#btn").remove();


//克隆结点 加上clone(true)为深拷贝
// $("#btn").clone()
// $("#btn").clone(true)
   </script>
</body>
</html>